<template>
  <div>
    <!-- 顶部图片 -->

    <!-- 顶部背景图片 -->

    <div class="cont">
      <van-sticky>
        <img width="100%" src="../../assets/deep1.jpeg" alt="" />
        <!-- 搜索框 -->
        <van-search shape="round" v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-sticky>
      <van-sidebar v-model="activeKey">
        <van-sidebar-item @sidebar-width="200" @click="movie" title="电影" />
        <van-sidebar-item @click="dongman" title="动漫" />
        <van-sidebar-item @click="dianshiju" title="电视剧" />
      </van-sidebar>

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="列表加载完成" success-duration="1000">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <yinshi @sc="shoucang(item.name, item.type, item.id)" @dz="dianzan(item.user, item.type, item.name)"
            :name="item.name" :imgs="item.imgs" :actor="item.actor" :score="item.score" :id="item.id" :type="item.type"
            :dz_count="item.dz_count" v-for="item in movieData" :shoucangcount="shoucangcount"></yinshi>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";
import httpApi from "@/http/apis/movie/MovieApi";
import dongmanApi from "@/http/apis/dongman/DongmanApi";
import dianshiApi from "@/http/apis/dianshi/DianshiApi";
import userApi from "@/http/apis/user/userApi";
import yinshi from "@/components/yinshi.vue";
import yinshiApi from "@/http/apis/yinshi-all/yinshiApi";
import { Toast } from 'vant';
import { mapMutations } from 'vuex'


Sidebar;
Vue.use(SidebarItem);
export default {
  components: { yinshi },
  data() {
    return {
      shoucangcount:0,
      // 默认显示
      active: 0,
      movieData: [], //存放电影数据
      loading: false,
      finished: false,
      refreshing: false,
      activeKey: 0,
      value: "",
    };
  },
  // created(){
  //   if(this.movieData){
  //     this.movie()
  //     console.log(1);
  //   }
  // },
  methods: {
    ...mapMutations(['saveUser']),

    //收藏
    //收藏按钮
    shoucang(name, type, id) {
      if (this.$store.state.user) {
        console.log("收藏按钮");
        var user=this.$store.state.user.username
        let params = { user, id, };
        console.log(params);
        var apis
        if (type == "movie") {
          apis = userApi.movies(params)
        } else if (this.type == "dongman") {
          apis = userApi.dongman(params)
        } else {
          apis = userApi.dianshi(params)
        }
        apis.then((res) => {
          console.log(res.data.code);
          if (res.data.code == 501) {
            // 取消收藏
            this.collect_delete(name, type)
          } else {
            console.log('开始收藏');
            apis.then(res => {
              console.log(res);
              Toast.loading({
                message: "收藏成功",
                forbidClick: true,
                icon: 'none'
              });
              this.shoucangcount=1
            })
          }
        });
      } else {
        Toast.loading({
                message: "请登录后再操作",
                forbidClick: true,
                icon: 'none'
              });
      }

    },
    collect_delete(name, type) {
      // 获取当前电影在收藏表中的id
      var user=this.$store.state.user.username
      let params1 = { user, name, type }
      console.log(params1);
      userApi.get_collectsId(params1).then(res => {
        // console.log(res.data.id);
        var id_collect = res.data.id

        let params = { id: id_collect }
        userApi.shoucang(params).then((res) => {
          console.log("res", res);
        })

        Toast.loading({
          message: "取消收藏成功",
          forbidClick: true,
          icon: 'none'
        });
        this.shoucangcount=0

      })
    },
    onSearch() {
      let name = this.value;
      let params = { page: 1, pagesize: 5, name };
      yinshiApi.queryByname(params).then((res) => {
        console.log(res);

        //替换掉当前数组
        this.movieData.splice(0, this.movieData.length, ...res.data.data);
        console.log(this.movieData);
        this.loading = false;
        this.finished = true;
      });
    },
    dianzan(user, type, name) {
      if(this.$store.state.user){
        let params = { user, type, name };
        userApi.dianzan(params).then((res) => {
          console.log(res);
          let params = { page: 1, pagesize: 10 };
          let apis;
          if (this.activeKey == 0) {
            apis = httpApi.queryMovie;
          } else if (this.activeKey == 1) {
            apis = dongmanApi.dongmanApi;
          } else {
            apis = dianshiApi.querydianshi;
          }
          console.log(res.data.msg);
          if (res.data.msg == '今天已经点赞10次了') {
            Toast('点赞过于频繁，请稍后重试');
          }
          apis(params).then((res) => {
            // console.log(res)
            console.log("出发了点赞请求");
            this.movieData = res.data.data.result;
            // 将窗口的滚动条滚到顶部
            //  this.onRefresh();
          });
        });

      }else{
        Toast.loading({
                message: "请登录后再操作",
                forbidClick: true,
                icon: 'none'
              });
      }
    },


    onLoad() {
      // 触底加载判断
      console.log(this.movieData.length);
      if (this.movieData.length == 0) {
        console.log(2);
        this.movie()
        this.loading = false
      } else {
        this.loading = true

        // onLoad执行时, vant会自动将loading改为true
        console.log("到底了...")
        // 发送请求, 加载下一页数据   下一页数据的page=?  与movieData.length
        let nextPage = Math.floor(this.movieData.length / 10) + 1; // 下一页页码
        let pagesize = 10; // 每页多少条
        let params = { page: nextPage, pagesize }
        let apis;
        if (this.activeKey == 0) {
          apis = httpApi.queryMovie;
        } else if (this.activeKey == 1) {
          apis = dongmanApi.dongmanApi;
        } else {
          apis = dianshiApi.querydianshi;
        }
        apis(params).then((res) => {
          console.log(res);
          this.movieData.push(...res.data.data.result);
          this.loading = false;
          this.refreshing = false;
          // 判断当前列表是否已经到底
          // 先判断是否为空
          if (res.data.data.total == this.movieData.length) {
            this.finished = true;
            console.log('没有更多数据');
            // Toast('没有更多数据了')
          }
        });
      }
    },
    onRefresh() {
      // 发请求, 加载当前类别下的首页数据
      let params = { page: 1, pagesize: 10 };
      let apis;
      if (this.activeKey == 0) {
        apis = httpApi.queryMovie;
      } else if (this.activeKey == 1) {
        apis = dongmanApi.dongmanApi;
      } else {
        apis = dianshiApi.querydianshi;
      }
      apis(params).then((res) => {
        this.refreshing = false;
        // 替换掉当前列表
        this.movieData.splice(
          0,
          this.movieData.length,
          ...res.data.data.result
        );
        // 顺便还要更新缓存
        this.finished = false;
      });
    },
    // 电影接口
    movie() {
      let params = { page: 1, pagesize: 10 };
      httpApi.queryMovie(params).then((res) => {
        // console.log(res)
        console.log("出发了电影请求");
        (this.movieData = res.data.data.result),
          // 将窗口的滚动条滚到顶部
          window.scrollTo(0, 0);
        this.onRefresh();
      });
    },
    //动漫接口
    dongman() {
      let params = { page: 1, pagesize: 10 };
      dongmanApi.dongmanApi(params).then((res) => {
        // console.log(res)
        console.log("出发了动漫请求");
        (this.movieData = res.data.data.result),
          // 将窗口的滚动条滚到顶部
          window.scrollTo(0, 0);
        this.onRefresh();
      });
    },
    //电视剧接口
    dianshiju() {
      console.log("出发了电视剧请求");
      let params = { page: 1, pagesize: 10 };
      dianshiApi.querydianshi(params).then((res) => {
        // console.log(res)
        (this.movieData = res.data.data.result),
          // 将窗口的滚动条滚到顶部
          window.scrollTo(0, 0),
          this.onRefresh();
      });
    },
  },
  mounted() {
    // if (this.movieData == []) {
    //   this.movie(); //加载电影列表
    // }
  },
};
</script>

<style lang="scss" scoped>
img {
  display: block;

}

.van-sidebar {
  position: fixed;
  z-index: 9999;
}

.cont {
  .van-list {
    margin-left: 100px;
    margin-bottom: 38px;
  }
}
</style>
